<template>
    <div>
<!-- 头部 -->
<div class="nav">
      <div class="center">
        <div class="nav-item">
          <img src="/img/logo.png" alt="" />
        </div>
        <div class="nav-item">
          <a href="./index.html">首页</a>
        </div>
        <div class="nav-item">
          <a href="#"> 课程 </a>
          <ul>
            <li><a href="./blue.html">全能保过班</a></li>
            <li><a href="./green.html">进阶保过班</a></li>
            <li><a href="./orange.html">1v1私人订制班</a></li>
            <li><a href="./red.html">VIP保过班</a></li>
          </ul>
        </div>
        <div class="nav-item">
          <a href="#">PTE在线练习</a>
        </div>
        <div class="nav-item">
          <a href="#">CCL在线练习</a>
        </div>
        <div class="nav-item">
          <a href="#">登录</a>
          <span>|</span>
          <a href="#">注册</a>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.center {
				width: 100%;
				margin: 0 auto;
			}
			
			 /* body{
				filter: grayscale(1);
			}  */

			ul {
				list-style: none;
			}
			.clearfix::after {
				content: '';
				display: block;
				clear: both;
			}
			a {
				text-decoration: none;
				color: black;
			}
/* 导航栏 */
.nav{
				height: 80px;
				/* background-color: #ccc; */
				overflow: hidden;
			}
			.nav .center .nav-item{
				float: left;
				line-height: 80px;
				font-size: 14px;
				color: #1fcec3!important;
			}
			.nav .center img{
				width: 170px;
				margin-top: 14px;
				margin-left: 275px;
			}
			.nav .center .nav-item:nth-child(2){
				margin-left: 150px;
				margin-right: 60px;
			}
			.nav .center .nav-item:nth-child(3){
				margin-right: 60px;
			}
			.nav .center .nav-item:nth-child(4){
				margin-right: 60px;
			}
			.nav .center .nav-item:nth-child(5){
				margin-right: 160px;
			}
			.nav .center .nav-item ul{
				display: none;
			}
			.nav .center .nav-item a:active{
				color: #67DDEA;
				color: #1fcec3 !important;
			}
			.nav .center .nav-item:nth-child(3):hover ul{
				display: block;
				width: 150px;
				height: 180px;
				margin-top: 10px;
				box-sizing: border-box;
				padding-top: 15px;
				position: fixed;
				left: 600px;
				background-color: #fff;
			}
			.nav .center .nav-item ul li{
				height: 35px;
				padding-left: 30px;
				line-height: 35px;
				color: #69BEE6;
			}
			.nav .center .nav-item ul li:hover{
				color: #69BEE6;
				background-color: rgba(122, 197, 232, .4);
			}
			.nav .center .nav-item span{
				margin-left: 10px;
				margin-right: 10px;
			}
</style>